import React from "react";
import { Carousel, Table } from 'antd';
import './Engineering.less'

const Engineering: React.FC = () => {
    // 表格数据
    const dataSource = [
        {
            label1: '管理层级',
            value1: '乡镇街道',
            label2: '工程等级',
            value2: 'II',
        },
        {
            label1: '所在流域（水系）',
            value1: '钱塘江流域江水系',
            label2: '灌区等级',
            value2: '大型',
        },
        {
            label1: '灌区类型',
            value1: '提水',
            label2: '水源类型',
            value2: '河湖泵站',
        },
        {
            label1: '干渠总长度（km）',
            value1: '1008',
            label2: '支渠总长度（km）',
            value2: '500',
        },
        {
            label1: '灌区总土地面积（万亩）',
            value1: '86.3',
            label2: '可耕地面积（万亩）',
            value2: '52',
        },
        {
            label1: '设计灌溉面积（万亩）',
            value1: '40.2',
            label2: '有效灌溉面积（万亩）',
            value2: '37.54',
        },
        {
            label1: '主要粮食作物',
            value1: '稻谷、小麦、大麦、京英、薯类等',
            label2: '作物统计',
            value2: '-',
        },
    ];

    const columns = [
        {
            title: '',
            dataIndex: 'label1',
            key: 'label1',
            className: 'label-column',
            width: '25%',
        },
        {
            title: '',
            dataIndex: 'value1',
            key: 'value1',
            className: 'value-column',
            width: '25%',
        },
        {
            title: '',
            dataIndex: 'label2',
            key: 'label2',
            className: 'label-column',
            width: '25%',
        },
        {
            title: '',
            dataIndex: 'value2',
            key: 'value2',
            className: 'value-column',
            width: '25%',
        },
    ];

    return (
        <div className="engineering">
            <div className="engineering-header">
                <h1>东芝灌区（兰溪市）</h1>
            </div>
            <div className="engineering-content">
                <div className="carousel-section">
                    <Carousel autoplay dots={{ className: 'custom-dots' }}>
                        <div>
                            <img width={'100%'} height={'100%'} src="https://www.peopleweekly.cn/uploadfile/2022/1104/20221104052959870.jpg" alt="灌区图片1" />
                        </div>
                        <div>
                            <img width={'100%'} height={'100%'} src="https://www.peopleweekly.cn/uploadfile/2022/1104/20221104052959870.jpg" alt="灌区图片2" />
                        </div>
                        <div>
                            <img width={'100%'} height={'100%'} src="https://www.peopleweekly.cn/uploadfile/2022/1104/20221104052959870.jpg" alt="灌区图片3" />
                        </div>
                    </Carousel>
                </div>
                
                <div className="info-section">
                    <div className="info-container">
                        <div className="table-section">
                            <Table 
                                dataSource={dataSource} 
                                columns={columns} 
                                pagination={false}
                                bordered
                                className="info-table"
                                rowClassName={(record, index) => index % 2 === 0 ? 'even-row' : 'odd-row'}
                            />
                        </div>
                        <div className="district-intro">
                            <h3>灌区简介</h3>
                            <p>
                                灌区属于钱塘江流域浙江水系，灌溉水源来自衢江支流，根据地形和水源条件，灌区整提并重发展，逐步形成"东风灌片自流灌溉+涉堰灌片提水+灌溉+两渠堰泵站补充灌溉"的灌溉格局和体系。东风堰片位于灌区北部，要覆盖永昌街道、赤溪街道、兰江街道和诸葛镇，以金山头水库和火炉山水库为主要水源，分东、西两条干渠自北向南延伸自流灌溉，土地面积14.53万亩，灌溉面积6.16万亩，涉堰灌片位于灌区南部，主要涉及涉堰镇和水亭，以衢江为水源的三座一级泵站提水，分别沿干渠自南向北延伸分级提水灌溉，土地面积13.48万亩，灌溉面积6.34万亩，埠溪和赤溪自北向南穿过整个灌区，连通东风灌片和涉堰灌片，是东芝灌区农田排水通和灌溉补充水源，通过沿溪的小型堰坝和泵站，引水或者横向两侧农田补充灌溉。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Engineering;